<template>
  <div class="demo-title">popup/demo1</div>
  <Cell text="Left" :has-arrow="true" @click="left.doPopup()" />
  <Cell text="Right" :has-arrow="true" @click="right.doPopup()" />
  <Cell text="Top" :has-arrow="true" @click="top.doPopup()" />
  <Cell text="Bottom" :has-arrow="true" @click="bottom.doPopup()" />
  <Popup v-model:visible="left.visible" direction="left" width="80%" />
  <Popup v-model:visible="right.visible" direction="right" />
  <Popup v-model:visible="top.visible" direction="top" />
  <Popup v-model:visible="bottom.visible" direction="bottom" height="300px" />
</template>

<script lang="ts" setup>
  import { reactive } from 'vue'
  import Cell from '@sscd-mobile/cell'
  import Popup from '@sscd-mobile/popup'
  const left = reactive({
    visible: false,
    doPopup: () => left.visible = true
  })
  const right = reactive({
    visible: false,
    doPopup: () => right.visible = true
  })
  const top = reactive({
    visible: false,
    doPopup: () => top.visible = true
  })
  const bottom = reactive({
    visible: false,
    doPopup: () => bottom.visible = true
  })
</script>

<style lang="less" scoped></style>
